<template>
    <div class="login-container">
        <!-- 登录 -->
        <div class="login-wrap">
            <div class="login">
                <div class="loginform">
                    <ul class="tab clearFix">
                        <li>
                            <a href="##" style="border-right: 0;">扫描登录</a>
                        </li>
                        <li>
                            <a href="##" class="current">账户登录</a>
                        </li>
                    </ul>

                    <div class="content">
                        <form>
                            <div class="input-text clearFix">
                                <span></span>
                                <input type="text" placeholder="邮箱/用户名/手机号" v-model="phone" />
                            </div>
                            <div class="input-text clearFix">
                                <span class="pwd"></span>
                                <input type="text" placeholder="请输入密码" v-model="pwd" />
                            </div>
                            <div class="setting clearFix">
                                <label class="checkbox inline">
                                    <input name="m1" type="checkbox" value="2" checked />
                                    自动登录
                                </label>
                                <span class="forget">忘记密码？</span>
                            </div>
                            <button class="btn" @click.stop.prevent="login">登&nbsp;&nbsp;录</button>
                        </form>

                        <div class="call clearFix">
                            <ul>
                                <li><img src="./images/qq.png" alt="" /></li>
                                <li><img src="./images/sina.png" alt="" /></li>
                                <li><img src="./images/ali.png" alt="" /></li>
                                <li><img src="./images/weixin.png" alt="" /></li>
                            </ul>
                            <router-link class="register" to="/register">立即注册</router-link>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部 -->
        <div class="copyright">
            <ul>
                <li>关于我们</li>
                <li>联系我们</li>
                <li>联系客服</li>
                <li>商家入驻</li>
                <li>营销中心</li>
                <li>手机好物</li>
                <li>销售联盟</li>
                <li>好物社区</li>
            </ul>
            <div class="address">地址：广东省中山市东区街道</div>
            <div class="beian">
                <a href="https://beian.miit.gov.cn/" target="_blank">备案号: 粤ICP备2021178257号</a>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Login',
        data() {
            return {
                phone: "13700000000",
                pwd: "111111",
            }
        },
        methods: {
            async login() {
                const { phone, pwd } = this
                if (phone && pwd) {
                    let r = await this.$store.dispatch("login", {phone, password: pwd}).catch(e => alert(e))
                    if (r?.token) {
                        if (this.$route.query.redirect) {
                            this.$router.push(this.$route.query.redirect)
                        }else {
                            this.$router.push("/home")
                        }
                    }
                }
            },
        },
    }
</script>

<style lang="less" scoped>
    .login-container {
      .login-wrap {
        height: 487px;
        background-color: #e93854;

        .login {
          width: 1200px;
          height: 487px;
          margin: 0 auto;
          background: url(./images/loginbg.png) no-repeat;
        }

        .loginform {
          width: 420px;
          height: 406px;
          box-sizing: border-box;
          background: #fff;
          float: right;
          top: 45px;
          position: relative;
          padding: 20px;

          .tab {

            li {
              width: 50%;
              float: left;
              text-align: center;

              a {
                width: 100%;
                display: block;
                height: 50px;
                line-height: 50px;
                font-size: 20px;
                font-weight: 700;
                color: #333;
                border: 1px solid #ddd;
                box-sizing: border-box;
                text-decoration: none;

              }

              .current {
                border-bottom: none;
                border-top-color: #28a3ef;
                color: #e1251b;
              }
            }
          }

          .content {
            width: 380px;
            height: 316px;
            box-sizing: border-box;
            border: 1px solid #ddd;
            border-top: none;
            padding: 18px;

            form {
              margin: 15px 0 18px 0;
              font-size: 12px;
              line-height: 18px;

              .input-text {
                margin-bottom: 16px;

                span {
                  float: left;
                  width: 37px;
                  height: 32px;
                  border: 1px solid #ccc;
                  background: url(./images/icons.png) no-repeat -10px -201px;
                  box-sizing: border-box;
                  border-radius: 2px 0 0 2px;
                }

                .pwd {
                  background-position: -72px -201px;
                }

                input {
                  width: 302px;
                  height: 32px;
                  box-sizing: border-box;
                  border: 1px solid #ccc;
                  border-left: none;
                  float: left;
                  padding-top: 6px;
                  padding-bottom: 6px;
                  font-size: 14px;
                  line-height: 22px;
                  padding-right: 8px;
                  padding-left: 8px;

                  border-radius: 0 2px 2px 0;
                  outline: none;
                }
              }

              .setting {
                label {
                  float: left;
                }

                .forget {
                  float: right;
                }
              }

              .btn {
                background-color: #e1251b;
                padding: 6px;
                border-radius: 0;
                font-size: 16px;
                font-family: 微软雅黑;
                word-spacing: 4px;
                border: 1px solid #e1251b;
                color: #fff;
                width: 100%;
                height: 36px;
                margin-top: 25px;
                outline: none;
              }
            }

            .call {
              margin-top: 30px;

              ul {
                float: left;

                li {
                  float: left;
                  margin-right: 5px;
                }
              }

              .register {
                float: right;
                font-size: 15px;
                line-height: 38px;
              }

              .register:hover {
                color: #4cb9fc;
                text-decoration: underline;
              }
            }

          }
        }
      }

      .copyright {
        width: 1200px;
        margin: 0 auto;
        text-align: center;
        line-height: 24px;

        a {
            cursor: default;
            &:hover {
                text-decoration: none;
            }
        }

        ul {
          li {
            display: inline-block;
            border-right: 1px solid #e4e4e4;
            padding: 0 20px;
            margin: 15px 0;
          }
        }
      }

    }
</style>
